<template>
  <div class="search">
    <Card>
      <div class="money-wrapper">
        <div class="item">
          <span>焕贝流水总额：</span><span>{{ money.huanbei || 0 }}</span>
        </div>
        <div class="item">
          <span>充值金额：</span><span>{{ money.chongzhi || 0 }}</span>
        </div>
      </div>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="100"
          class="search-form"
        >
          <Form-item label="会员手机号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入会员名称"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="区域" prop="rechargeSn">
            <regions
              style="width: 350px"
              :showIs="true"
              @selected="selectedRegionSearch"
            />
          </Form-item>
          <Form-item label="会员级别" prop="level">
            <Select
              v-model="searchForm.level"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option value="0">普通会员</Option>
              <Option value="1">银会员</Option>
              <Option value="2">金会员</Option>
            </Select>
          </Form-item>
          <Form-item label="身份类型" prop="roleName">
            <Select
              v-model="searchForm.roleName"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option value="STORE">商家</Option>
              <Option value="AGENT">代理商</Option>
              <Option value="PROMOTER">推广员</Option>
              <Option value="ANGEL_PARTNER">天使合伙人</Option>
              <Option value="BUSINESS_PARTNER">事业合伙人</Option>
              <Option value="ORDINARY_USERS">普通用户</Option>
            </Select>
          </Form-item>

          <Form-item label="下单时间">
            <DatePicker
              v-model="selectDate"
              type="datetimerange"
              format="yyyy-MM-dd"
              clearable
              @on-change="selectDateRange"
              placeholder="选择起始时间"
              style="width: 200px"
            ></DatePicker>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Row class="operation padding-row" v-if="!selectedMember"> </Row>

      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50, 100]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- 查看模态框 -->
    <Modal v-model="descFlag" :title="descTitle" width="500">
      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
        <FormItem label="流水号" prop="rechargeSn">
          <Input v-model="form.rechargeSn" style="width: 200px" readonly />
        </FormItem>
        <FormItem label="用户名" prop="nickName">
          <Input v-model="form.nickName" style="width: 200px" readonly />
        </FormItem>
        <FormItem label="手机号" prop="mobile">
          <Input v-model="form.mobile" style="width: 200px" readonly />
        </FormItem>
        <FormItem label="用户类型" prop="type">
          <Input v-model="form.type" style="width: 200px" readonly />
        </FormItem>
        <!-- <FormItem label="充值类型" prop="rechargeType">
          <Input v-model="form.rechargeType" style="width: 200px" readonly />
        </FormItem> -->
        <FormItem label="充值金额" prop="rechargeMoney">
          <Input v-model="form.rechargeMoney" style="width: 200px" readonly />
        </FormItem>
        <FormItem label="焕贝金额" prop="yiBei">
          <Input v-model="form.yiBei" style="width: 200px" readonly />
        </FormItem>
        <FormItem label="充值时间" prop="createTime">
          <Input v-model="form.createTime" style="width: 200px" readonly />
        </FormItem>
      </Form>
      <div slot="footer">
        <!-- <Button @click="descFlag = false">取消</Button> -->
        <Button type="primary" @click="handleSubmitModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import region from "@/views/lili-components/region-every";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as RegExp from "@/libs/RegExp.js";
import regions from "@/views/agent-manage/region";
export default {
  name: "member",
  components: {
    region,
    regions,
    ossManage,
  },
  data() {
    return {
      money: {}, //平台资金  充值资金
      descTitle: "", // modal标题
      descFlag: false, //编辑查看框
      loading: true, // 表单加载状态
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        mobile: "", //手机号
        level: "",
        roleName: "",
        rechargeSn: null,
        rechargeType: null,
        startDate: "",
        endDate: "",
      },
      selectDate: null, // 选择时间段
      // 修改对象
      form: {},
      ruleValidate: {}, //修改验证
      columns: [
        {
          title: "会员昵称",
          key: "nickName",
          width: "150",
          tooltip: true,
        },
        {
          title: "姓名",
          key: "name",
          tooltip: true,
          width: "150",
        },
        {
          title: "身份证号",
          key: "code",
          tooltip: true,
          width: "200",
        },
        {
          title: "手机号",
          key: "mobile",
          tooltip: true,
          width: "150",
        },
        {
          title: "级别",
          key: "typeName",
          tooltip: true,
          width: "100",
        },
        {
          title: "身份类型",
          key: "roleName",
          tooltip: true,
          width: "150",
        },
        {
          title: "区域",
          key: "locationName",
          tooltip: true,
          width: "250",
        },
        {
          title: "充值类型",
          key: "rechargeTypeName",
          tooltip: true,
          width: "150",
        },
        {
          title: "订单号",
          key: "rechargeSn",
          tooltip: true,
          width: "300",
        },
        {
          title: "充值焕贝额",
          key: "huanbeiMoney",
          tooltip: true,
          width: "200",
        },
        {
          title: "充值现金额",
          key: "rechargeMoney",
          tooltip: true,
          width: "200",
        },
        {
          title: "充值时间",
          key: "payTime",
          tooltip: true,
          width: "200",
        },
        // {
        //   title: "操作",
        //   key: "action",
        //   align: "center",
        //   width: 200,
        //   fixed: "right",
        //   render: (h, params) => {
        //     return h(
        //       "div", {
        //         style: {
        //           display: "flex",
        //           justifyContent: "center",
        //         },
        //       },
        //       [
        //         h(
        //           "Button", {
        //             props: {
        //               size: "small",
        //               type: params.row.___selected ? "primary" : "default",
        //             },
        //             style: {
        //               marginRight: "5px",
        //               display: this.selectedMember ? "block" : "none",
        //             },
        //             on: {
        //               click: () => {
        //                 this.callback(params.row, params.index);
        //               },
        //             },
        //           },
        //           params.row.___selected ? "已选择" : "选择"
        //         ),
        //         h(
        //           "Button", {
        //             props: {
        //               type: "info",
        //               size: "small",
        //               ghost: true,
        //             },
        //             style: {
        //               marginRight: "5px",
        //               display: this.selectedMember ? "none" : "block",
        //             },
        //             on: {
        //               click: () => {
        //                 this.editPerm(params.row);
        //               },
        //             },
        //           },
        //           "查看"
        //         ),
        //       ]
        //     );
        //   },
        // },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectMember: [], //保存选中的用户
      rechargeList: [
        {
          id: 4,
          label: "普通充值",
        },
      ],
      transarr: {
        id: "",
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        disabled: "OPEN",
      },
    };
  },
  props: {
    // 是否为选中模式
    selectedMember: {
      type: Boolean,
      default: false,
    },
    // 已选择用户数据
    selectedList: {
      type: null,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    selectedList: {
      handler(val) {
        this.$set(this, "selectMember", JSON.parse(JSON.stringify(val)));
        this.init(this.data);
        // 将父级数据与当前组件数据进行匹配
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 时间
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    // 选中的地址
    selectedRegionSearch(val) {
      // let ids = val[0];
      // this.searchForm.location = ids[ids.length - 1];//选择任意一级，只传最后一级别给后端
      this.searchForm.location = val[0];
    },
    getMoney() {
      if (this.searchForm.location) {
        this.searchForm.location = this.searchForm.location.toString();
      }
      API_Member.getRechargeMoney(this.searchForm).then((res) => {
        this.money = res.result;
      });
    },
    //查询会员等级列表
    getData() {
      this.loading = true;
      API_Member.getRechargelist(this.searchForm).then((res) => {
        if (res.result.records) {
          this.loading = false;
          this.init(res.result.records);
          this.total = res.result.total;
        }
      });
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getMoney();
      this.getData();
    },
    //查看详情
    editPerm(val) {
      this.descTitle = "查看";
      this.transarr.id = val.id;
      this.descFlag = true;
      this.getMemberInfo();
    },
    // 查询查看流水详情
    getMemberInfo() {
      let params = {
        id: this.transarr.id,
        pageNumber: this.transarr.pageNumber,
        pageSize: this.transarr.pageSize,
        order: this.transarr.order,
        disabled: this.transarr.disabled,
      };
      API_Member.getdetRechargelist(params).then((res) => {
        if (res.result) {
          this.$set(this, "form", res.result.records[0]);
          if (this.form.type == 1) {
            this.form.type = "商家用户";
          } else if (this.form.type == 2) {
            this.form.type = "小程序用户";
          }
          if (this.form.rechargeType == 1) {
            this.form.rechargeType = "提现";
          } else if (this.form.rechargeType == 2) {
            this.form.rechargeType = "年费会员";
          } else if (this.form.rechargeType == 3) {
            this.form.rechargeType = "会员";
          } else if (this.form.rechargeType == 4) {
            this.form.rechargeType = "普通充值";
          }
        }
      });
    },
    // 查看弹框确定
    handleSubmitModal() {
      this.descFlag = false;
    },
    // 回调给父级
    callback(val, index) {
      this.$set(val, "___selected", !val.___selected);
      console.log(val.___selected);
      console.log(this.selectMember);
      let findUser = this.selectMember.find((item) => {
        return item.id == val.id;
      });
      // 如果没有则添加
      if (!findUser) {
        this.selectMember.push(val);
      } else {
        // 有重复数据就删除
        this.selectMember.map((item, index) => {
          if (item.id == findUser.id) {
            this.selectMember.splice(index, 1);
          }
        });
      }
      this.$emit("callback", val);
    },
    // 初始化信息
    init(data) {
      data.forEach((item) => {
        if (this.selectMember.length != 0) {
          this.selectMember.forEach((member) => {
            if (member.id == item.id) {
              this.$set(item, "___selected", true);
            }
          });
        } else {
          this.$set(item, "___selected", false);
        }
      });
      this.data = data;
    },
  },
  mounted() {
    this.getMoney();
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}

.money-wrapper {
  display: flex;

  .item {
    margin-right: 40px;
    font-size: 16px;
  }
}

.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
